<template>
  <div class="drug-page h100">
    <div class="header">
      <div class="header-title">
        <div className="title-f30">
          尊敬的患者和家属：
        </div>
        <div className="indent">
          全国健康教育协作网络是全国范围的患者教育协作组织，定期邀请国内知名医院的专家，开设线上康复课程。
        </div>
        <div className="indent">
          如果您有康复的需求，请您填写以下表格。我们会根据您的需求，尽力为您匹配相应的线上康复课。
        </div>
        <div className="indent">
          这些课程由第三方机构协助提供，有可能会产生相应的费用，请您知悉。
        </div>
      </div>
    </div>
    <div>
      <van-form @submit="onSubmit">
        <!-- <van-field
          v-model="submitForm.drugName"
          label="用药名称"
          placeholder="请输入用药名称"
          :rules="[{ required: true, message: '请输入用药名称' }]"
        /> -->
        <van-field
          v-model="submitForm.name"
          label="姓名"
          placeholder="请输入您的姓名"
          :rules="[{ required: true, message: '请输入您的姓名' }]"
          @blur="setButton(true)"
          @focus="setButton(false)"
        />
        <van-field
          v-model="submitForm.phone"
          label="手机号码"
          maxlength="11"
          placeholder="请输入您的手机号码"
          :rules="[{ validator:validatorPhone,required: true, message: '请输入正确的手机号码' }]"
          @blur="setButton(true)"
          @focus="setButton(false)"
        />
        <van-field
          class="area-drug"
          v-model="submitForm.reportContext"
          rows="3"
          autosize
          type="textarea"
          border
          maxlength="200"
          placeholder="请填写您关注的疾病及康复需求，我们为您对接相应的康复课程"
          show-word-limit
          :rules="[{ required: true, message: '请填写您关注的疾病及康复需求' }]"
          @blur="setButton(true)"
          @focus="setButton(false)"
        />
    
        <div class="flex flex-center" v-if="isBtnShow">
          <van-button
            native-type="submit"
            color="#20beb6"
            type="primary"
            block
            class="drug-button"
          >
            提交
          </van-button>
        </div>
      </van-form>
    </div>
    <Popup
      v-model="ewmShow"
      :content-is-show="false"
    >
      <div class="popup-img">
        <Image
          class="wfull hfull"
          :src="require('@/static/ewm.png')"
        />
        <div class="popup-content">
          <div class="content-top">
            添加工作人员为好友可获取线上康复课程
          </div>
        </div>
      </div>
    </Popup>
    <div
      class="popup-close"
      v-if="ewmShow"
      @click="closePopup"
    >
      <Image
        width="32"
        height="32"
        :src="require('@/static/close.png')"
      />
    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';
import { Toast } from 'vant';
import { ref, reactive } from 'vue';
import Popup from '@/components/Popup';
import Image from '@/components/Image';
import { useService } from '@/utils/services';
const PHONE = /^1[^12][0-9]{9}$/; //手机号验证
export default {
  components: {
    Popup,
    Image
  },
  setup() {
    const actions = useService(({ hos }) => ({ hos }));
    const router = useRouter();

    const pushRouter = (url) => {
      router.push(url);
    };

    const submitForm = reactive({
      // drugName:'',//用药名称
      name: '', //姓名
      phone: '', //手机号
      reportContext: '' //不良反应
    });

    const ewmShow = ref(false);

    const isBtnShow = ref(true);

    //手机号验证
    const validatorPhone = (val) => {
      return PHONE.test(val);
    };

    //返回首页
    const goBack = () => {
      setTimeout(() => {
        pushRouter('/home');
      }, 500);
    };

    //提交接口
    const onSubmit = () => {
      actions.hos.saveRecoveryOrderInfo(submitForm).then((res) => {
        Toast('提交成功');
        ewmShow.value = true;
      });
    };

    //关闭弹窗
    const closePopup = () => {
      ewmShow.value = false;
      goBack();
    };

    const setButton = (bool) => {
      isBtnShow.value = bool;
    };

    return {
      onSubmit,
      submitForm,
      validatorPhone,
      ewmShow,
      closePopup,
      setButton,
      isBtnShow
    };
  }
};
</script>

<style lang="scss" scoped>
.drug-page {
  background: #fff;
  .header {
    background: rgba(250, 148, 15, 0.2);
    line-height: 38px;
    padding: 30px;
    .header-title {
      font-size: 12px;
      color: #fa940f;
    }
  }
}
.drug-button {
  position: fixed;
  bottom: 150px;
  margin: 0 20px;
  width: 90%;
}
.title-f30 {
  font-size: 30px;
}
.indent {
  text-indent: 2em;
  line-height: 48px;
  font-size: 30px;
}
.popup-img {
  width: 621px;
  height: 802px;
  background-color: rgba(0, 0, 0, 0.7);
  position: relative;
}
.popup-close {
  width: 100%;
  height: 104px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2109;
  position: fixed;
  top: calc(50% + 410px);
}
.popup-content {
  position: absolute;
  top: 0;
  width: 621px;
  height: 160px;
}
.content-top {
  height: 160px;
  font-size: 40px;
  padding: 0 50px;
  font-weight: 500;
  color: #ffffff;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content-img {
  height: 640px;
  width: 621px;
  .van-image {
    img {
      -webkit-touch-callout: none;
    }
  }
}
.content-img img {
  -webkit-touch-callout: none;
}
.radio-size {
  margin-left: 30px;
  color: #373d52;
}
.pb15 {
  padding-bottom: 15px;
}
.wfull {
  width: 100%;
  height: 1005;
}
.img-icon {
  width: 40px;
  height: 40px;
}
.van-radio {
  padding-bottom: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.radio-size {
  margin-top: 4px;
}
</style>
<style>
.area-drug {
  border: 1px solid #edeef0;
  margin: 0 20px;
  width: auto;
  border-radius: 6px;
  margin-top: 30px;
}
</style>